<template>
  <div class="tableBox">
    <el-table 
    :data="tableData" 
    :border="border" 
    :stripe='isStripe' 
    style="width: 100%"
    row-key="id"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column
        v-for="(item, index) in headerData"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="align"
        :header-align="headerAlign"
      >
      </el-table-column>
      <!-- 图片插槽 -->
      <el-table-column 
      v-if="isImg"
      :label="ImgName" 
      :prop='imgProp'
      :align="align"
      :width='imgWidth'
      :header-align="headerAlign"
      >
        <template slot-scope="scope">
          <slot name="imgSlot" v-bind:row="scope"></slot>
        </template>
      </el-table-column>
      <!-- 标签插槽 -->
      <el-table-column 
      v-if="isTag"
      :label="TagName" 
      :prop='tagProp'
      :align="align"
      :width='tagWidth'
      :header-align="headerAlign"
      >
        <template slot-scope="scope">
          <slot name="tagSlot" v-bind:row="scope"></slot>
        </template>
      </el-table-column>
      <el-table-column 
      v-if="isOpera"
      fixed="right" 
      label="操作" 
      :align="align"
      :width='operaWidth'
      :header-align="headerAlign"
      >
        <template slot-scope="scope">
          <slot name="opera" v-bind:row="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="isPage" class="pages">
      <el-pagination class="youdiqi"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :total="total"
        :page-sizes="pagesizeList"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
       
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleSizeChange(val) {
      let _self = this;
      _self.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      let _self = this;
      _self.$emit("handleCurrentChange", val);
    },
  },
  props: {
    //表头数据
    headerData: {
      type: Array,
      default: () => [],
    },
    //列表数据
    tableData: {
      type: Array,
      default: () => [],
    },
    //是否有边框
    border: {
      type: Boolean,
      default: () => true,
    },
    //是否有斑马纹
    isStripe:{
      type: Boolean,
      default: () => true,  
    },
    // 是否有分页
    isPage: {
      type: Boolean,
      default: () => true,
    },
    //分页时页容量
    pagesizeList: {
      type: Array,
      default: () => [10, 15, 20],
    },
    //总条数
    total: {
      type: Number,
      default: () => 0,
    },
    pagenum: {
      type: Number,
      default: () => 1,
    },
    pagesize: {
      type: Number,
      default: () => 10,
    },
    // 居中
    align:{
      type:String,
      default:()=>{
        return "center"
      }
    },
    //表头居中
    headerAlign:{
      type:String,
      default:()=>{
        return "center"
      }
    },
    //是否有图片插槽
    isImg:{
      type:Boolean,
      default:()=>false
    },
    //图片插槽名称
    ImgName:{
      type:String,
      default:()=>'图片'
    },
    imgWidth:{
      type:Number,
      default:()=>200
    },
    // 图片插槽prop
    imgProp:{
      type:String,
      default:()=>'picUrl'
    },
    //是否有标签插槽
    isTag:{
      type:Boolean,
      default:()=>false
    },
    //标签插槽名称
    TagName:{
      type:String,
      default:()=>'状态'
    },
    tagWidth:{
      type:Number,
      default:()=>200
    },
    // 标签插槽prop
    tagProp:{
      type:String,
      default:()=>''
    },
    //操作列宽度
    operaWidth:{
      type:Number,
      default:()=>200
    },
    isOpera:{
      type:Boolean,
      default:()=>true
    },
  },
};
</script>
<style>
.tableBox{
  margin-top:20px;
  padding: 40px;
  /* box-shadow: 0px 0px 10px 3px rgb(167, 167, 167); */
  background-color: rgba(242,246,252,0.8);
  /* background-color: rgba(250,250,250); */
  border-radius: 10px;
}
.left{
    float: left;
}
.right{
    float: right;
}
.clear{
    clear: both;
}
.youdiqi{
  text-align: right;
}
.pages{
  margin-top: 20px;
}
</style>